<template>
    <el-date-picker
        v-model="date_range"
        clearable
        :type="type_range"
        :default-value="new Date()"        
        :value-format="date_format"
        :size="input_size"
        :disabled="is_disabled"
        :start-placeholder="start_p"
        :end-placeholder="end_p"
        :picker-options="pickerOptions"
        @change="changeDateRange">
	</el-date-picker>
</template>

<script>
    export default({
        name: 'MyDateRange',
        props: {
            start: {type: String|Object},
            end: {type: String|Object,},
            type: {type: String, default: function(){return 'daterange'}},
            size: {type: String, default: function(){return 'small'}},
            is_disabled: {type: Boolean, default: function(){return false}},
            pickerOptions:{type: Object},
        },
        data(){
            return {
                start_p: '开始日期',
                end_p: '结束日期',
                type_range: this.type,
                input_size: this.size,
                date_format: 'yyyy-MM-dd',
                // date_range: [this.start || '', this.end|| ''],
                dataRange: [],
            }
        },
        created(){
            if(this.type == 'monthrange'){
                this.start_p = '开始月份';
                this.end_p = '结束月份';
                this.date_format = 'yyyy-MM';
            }else if(this.type == 'datetimerange'){
                this.date_format = 'yyyy-MM-dd HH:mm:ss';
            }
        },
        computed:{
            start_time(){
                return this.start;
            },
            end_time(){
                return this.end;
            },
            date_range:{
                get(){
                    return [this.start || '', this.end || '']
                },
                set(newVal){
                    console.log(newVal);
                    var arr_date;
                    if(newVal){
                        arr_date = newVal
                    }else{
                        arr_date = ['',''];
                    }
                    this.$emit('update:start', arr_date[0]);
                    this.$emit('update:end', arr_date[1]);
                    this.$emit('change', arr_date);
                }
            }
        },
        watch : {
            start_time(newVal, oldVal){
                if(newVal){
                    this.date_range[0] = newVal;
                }else{
                    this.date_range =['', '']
                }
            },
            end_time(newVal, oldVal){
                if(newVal){
                    this.date_range[1] = newVal;
                }else{
                    this.date_range =['', '']
                }
            },
            // date_range(newVal, oldVal){
            //     var arr_date;
            //     if(newVal){
            //         arr_date = newVal
            //     }else{
            //         arr_date = ['',''];
            //     }
            //     this.$emit('update:start', arr_date[0]);
            //     this.$emit('update:end', arr_date[1]);
            //     this.$emit('change', arr_date);
            // }
        },
        methods:{
            changeDateRange(val){
                // var arr_date;
                // if(val){
                //     arr_date = val
                // }else{
                //     arr_date = ['',''];
                // }
                // this.$emit('update:start', arr_date[0]);
                // this.$emit('update:end', arr_date[1]);
                // this.$emit('change', arr_date);
            }
        }
    })
</script>
